<template>
  <div class="leave-message" v-loading="pages.loading">
    <div v-loading="pages.sendLoading" class="form">
      <comment-form
        placeholder="文字里的温柔一定和你有关!!"
        @send="sendLeaveMessage"
        emoticonClass="leaveMessage-text-emoticon"
      ></comment-form>
    </div>
    <div
      v-for="(item, index) in pages.messageBoardList"
      :key="index"
      class="msg-item"
    >
      <div class="inner">
        <div class="text"><html-text :content="item.content"></html-text></div>
        <div class="user-info">
          <div class="left">
            <span class="territory" v-if="item.territory">{{
              item.territory
            }}</span>
            <span class="date">{{ $sessionTime(item.createDate) }}</span>
            <span
              v-if="item.state == 1"
              class="btn"
              @click="openReplyLeaveMessage(item)"
              >回复TA</span
            >
          </div>
          <div class="right">
            <span class="nickname">
              {{ item.nickname }}
              <span v-if="item.role == 2" class="blogger">博主</span>
            </span>
            <img :src="item.headImg" alt="" />
          </div>
        </div>

        <!-- 回复留言 -->
        <div
          v-loading="pages.sendLoading"
          v-if="item.messageBoardId == pages.curReplyForm"
          class="msg-form"
        >
          <comment-form
            :placeholder="pages.placeholder"
            @send="(v, e) => replyLeaveMessage(v, e, item, item)"
            emoticonClass="leaveMessage-text-emoticon"
          ></comment-form>
        </div>

        <!-- 回复列表 -->
        <div class="reply">
          <div
            v-for="(value, key) in item.childrens.list"
            :key="key"
            class="reply-item"
          >
            <div class="info">
              <div class="left">
                <img :src="value.headImg" alt="" />
                <span class="name">{{ value.nickname }}</span>
                <span v-if="value.role == 2" class="blogger flex-none"
                  >博主</span
                >
                <span class="flex-none">{{
                  value.parentNickname ? "回复" : ""
                }}</span>
                <span class="name" v-if="value.parentNickname">{{
                  value.parentNickname
                }}</span>
                <span
                  v-if="value.state == 1"
                  @click="openReplyLeaveMessage(value)"
                  class="reply-btn flex-none"
                  >回复TA</span
                >
              </div>
              <div class="right">
                <span>{{ value.territory }}</span>
                {{ $sessionTime(value.createDate) }}
              </div>
            </div>
            <div class="reply-text">
              <html-text :content="value.content"></html-text>
            </div>
            <!-- 回复-回复留言 -->
            <div
              v-loading="pages.sendLoading"
              v-if="value.messageBoardId == pages.curReplyForm"
              class="reply-form"
            >
              <comment-form
                :placeholder="pages.placeholder"
                @send="(v, e) => replyLeaveMessage(v, e, value, item)"
                emoticonClass="leaveMessage-text-emoticon"
              ></comment-form>
            </div>
          </div>
        </div>
      </div>
      <div class="bg"></div>
    </div>
    <div class="more">
      <span v-if="pages.uploading && !pages.uploadingEnd">
        <i class="el-icon-loading"></i>
        加载中...
      </span>
      <span @click="uploadPage" v-if="!pages.uploading && !pages.uploadingEnd">
        加载更多
        <i class="el-icon-arrow-down"></i>
      </span>
      <span v-if="pages.uploadingEnd">就这么多啦,在往下就没了~</span>
    </div>
  </div>
</template>

<script>
import commentForm from "../comment-form/comment-form.vue";
import htmlText from "@/components/html-text/html-text";

export default {
  name: "WorkspaceJsonLeaveMessage",
  components: {
    commentForm,
    htmlText,
  },
  data() {
    return {
      pages: {
        loading: true,
        uploading: false, // 上拉加载
        uploadingEnd: false, // 加载完毕
        sendLoading: false,
        messageBoardList: [],
        curReplyForm: "",
        placeholder: "",
        postData: {
          pageSize: 10,
          pageIndex: 1,
        },
      },
    };
  },
  mounted() {
    this.getMessageBoardList();
  },
  methods: {
    // 获取留言列表
    getMessageBoardList() {
      this.$http("getMessageBoardList", this.pages.postData).then((res) => {
        this.pages.messageBoardList = [
          ...this.pages.messageBoardList,
          ...res.data.lists,
        ];
        this.pages.total = res.data.total;
        this.pages.loading = false;
        this.pages.uploading = false;
        if (res.data.lists.length < this.pages.postData.pageSize) {
          this.pages.uploadingEnd = true;
        }
      });
    },
    // 分页
    uploadPage() {
      if (!this.pages.uploadingEnd) {
        this.pages.uploading = true;
        this.pages.postData.pageIndex += 1;
        this.getMessageBoardList();
      }
    },
    // 发送留言
    sendLeaveMessage(data, clearData) {
      let postData = {
        content: data.content,
        parentId: "",
      };
      this.pages.sendLoading = true;
      this.$http("publishMessageBoard", postData).then((res) => {
        res.data.childrens = {
          list: [],
          total: 0,
        };
        this.pages.messageBoardList.unshift(res.data);
        this.pages.sendLoading = false;
        clearData();
        this.$notify({
          title: "博主小提示",
          message: "留言成功,博主可能忙去了,看到后会及时回复哦!",
          type: "success",
        });
      });
    },
    // 打开回复留言
    openReplyLeaveMessage(item) {
      this.pages.placeholder = `回复:${item.nickname}`;
      this.pages.curReplyForm = item.messageBoardId;
    },
    // 回复留言
    replyLeaveMessage(data, clearData, item, parent) {
      let postData = {
        content: data.content,
        parentId: item.messageBoardId,
      };
      this.pages.sendLoading = true;
      this.$http("publishMessageBoard", postData).then((res) => {
        parent.childrens.list.push(res.data);
        this.pages.sendLoading = false;
        clearData();
        this.$notify({
          title: "博主小提示",
          message: "回复成功,博主审核后会公开展示哦!",
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.leave-message {
  width: 100%;
}
.form {
  margin-bottom: 20px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  border-radius: 6px;
}
.msg-item {
  width: 100%;
  position: relative;
  margin-bottom: 30px;
  .text {
    max-width: 500px;
    margin: auto;
    padding: 40px 30px 30px;
    text-align: center;
    line-height: 30px;
  }
  .bg {
    width: 98%;
    height: 100%;
    background: #8cc9a4;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-1.5deg);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    background-image: linear-gradient(
        90deg,
        rgba(60, 10, 30, 0.1) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(60, 10, 30, 0.1) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
    border: 4px solid #fff;
    pointer-events: none;
  }
  .inner {
    width: 99.5%;
    height: 99%;
    position: relative;
    left: 6px;
    top: 3px;
    background: #fff;
    z-index: 2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    padding: 10px;
    box-sizing: border-box;
    &::before {
      content: "";
      border: 1px dotted #8cc9a4;
      position: absolute;
      left: 10px;
      top: 10px;
      bottom: 10px;
      right: 10px;
      pointer-events: none;
    }
  }
  .user-info {
    height: 40px;
    right: 20px;
    color: #999;
    font-size: 14px;
    line-height: 25px;
    position: relative;
    margin-bottom: 20px;
    text-align: right;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-left: 5px;
      vertical-align: middle;
      position: relative;
      top: -2px;
    }
    .nickname {
      line-height: 25px;
      height: 25px;
      display: inline-block;
      &::before {
        content: "";
        position: relative;
        display: inline-block;
        width: 50px;
        height: 2px;
        background: #cccccc;
        margin-right: 3px;
        top: -3px;
      }
    }

    .left {
      padding-right: 30px;
      span {
        margin-right: 10px;
      }
      .btn {
        &:active {
          color: #8cc9a4;
        }
      }
    }
  }

  .msg-form {
    padding: 0 20px 20px;
  }

  .reply {
    padding-top: 1px;
    .reply-item {
      margin: 0 20px 20px;
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #999;
        .left {
          display: flex;
          align-items: center;
          .name {
            @include main-text-hidden(1);
          }
          .flex-none {
            flex: none;
          }
        }
        img {
          width: 30px;
          height: 30px;
          background: #f5f5f5;
          border-radius: 50%;
          margin-right: 10px;
        }
        span {
          color: #999;
          margin: 5px;
        }
        .name {
          color: #607199;
        }
        .reply-btn {
          &:active {
            color: #8cc9a4;
          }
        }
      }
      .reply-text {
        background: #8cc9a4;
        color: #fff;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
        margin-left: 40px;
      }
    }

    .reply-form {
      padding-left: 40px;
      margin-top: 20px;
    }
  }

  .blogger {
    // color: #607199 !important;
    background: #8cc9a4;
    color: #fff !important;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
  }
}

.more {
  text-align: center;
  color: #999;
  margin-top: 40px;
}

@media (max-width: 750px) {
  .reply-item {
    margin: 0 10px 20px !important;
    .right {
      display: none;
    }
  }
  .user-info {
    .left {
      padding-right: 5px !important;
      .territory,
      .date {
        display: none;
      }
    }
    .right {
      .nickname {
        &::before {
          width: 30px;
        }
      }
    }
  }
}
</style>
